<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="../assets/commonAssets/boostrap/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="../assets/manageAssets/css/museum.css" />
		<link rel="stylesheet" type="text/css" href="../assets/manageAssets/css/changemuseum.css" />
		<link rel="stylesheet" type="text/css" href="../assets/commonAssets/font-awesome/css/font-awesome.css"/>
		<link rel="stylesheet" type="text/css" href="../assets/manageAssets/css/changeExplain.css"/>
		<script src="../assets/commonAssets/jquery/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$(".uploadimg").change(function() {
					var imgnum = $(this).attr("data");
					var file = $(this).val();
					var fileSize = $(this)[0].files[0].size;

					if (!/.(gif|jpg|jpeg|png|GIF|JPG|bmp)$/.test(file)) {
						alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
					} else {
						if (fileSize > 1024 * 300) {
							alert("请上传小于300K的图片");
						} else {
							$("." + imgnum).attr("src", URL.createObjectURL($(this)[0].files[0]));
						}
					}
				});
				$(".uploadAudio").change(function() {
					var file = $(this).val();
					var fileSize = $(this)[0].files[0].size;
				
					if (!/.(mp3)$/.test(file)) {
						alert("图片类型必须是.mp3类型");
					} else {
						if (fileSize > 1024 * 500) {
							alert("请上传小于500K的音频");
						} else {
							$("audio").attr("src", URL.createObjectURL($(this)[0].files[0]));
						}
					}
				});
				$('select').change("click",function(){
					var temp = $(this).val();
					$('.hname').attr("value",temp);
				});
			});
		</script>
		<title>展柜讲解编辑</title>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="Top"><i>展柜讲解编辑</i></div>
			</div>
			<div class="row col-xs-9" style="margin-top: 2%;">
				<form class="form-horizontal" method="post" action="updataExplain" enctype="multipart/form-data">
					<input type="hidden" name="mID" th:value="${session.user.mID}">
					<input type="hidden" name="eID" th:value="${explainBean.geteID()}">
					<div class="form-group" style="margin-bottom: 50px;">
						<label class="col-xs-2 control-label">展柜图片：</label>
						<div class="col-xs-3 Pic">
							<input type="file" data="img0" class="uploadimg" name="explainImage" style="width: 260px; height: 100px;">
							<img src="assets/manage/image/FileUpload.jpg" th:src="${explainBean.getEimage()}" class="img0" style="width: 260px; height: 100px;">
							<input type="hidden" name="eimage" th:value="${explainBean.getEimage()}">
						</div>
					</div>
					<div class="form-group">
						<label class="col-xs-2 control-label">所在展厅：</label>
						<div class="col-xs-3" style="width: 100px;height: 40px;margin-top: 6px; margin-bottom: 50px;">
							<select class="hname" name="hname" style="width: 167px; height: 30px;" th:value="${explainBean.getHname()}">
								<option th:text="${explainBean.getHname()}">所在展厅</option>
								<option value="自然">自然厅</option>
								<option value="民俗">民俗厅</option>
								<option value="历史">历史厅</option>
							</select>
						</div>
					</div>
					<div class="form-group" style="margin-bottom: 50px; margin-bottom: 50px;">
						<label class="col-xs-2 control-label">展柜名称：</label>
						<div class="col-xs-3">
							<input placeholder="展柜名称（限10字）" name="ename" th:value="${explainBean.getEname()}" th:placeholder="${explainBean.getEname()}" maxlength="10" style="width: 300px; height: 30px;" />
						</div>
					</div>
					<div class="form-group" style="margin-bottom: 50px;">
						<label class="col-xs-2 control-label">展柜音频：</label>
						<div class="col-xs-8 Audio">
							<i class="fa fa-upload"></i><input type="file" class="uploadAudio" name="explainVoice">
							<audio th:src="${explainBean.getEvoice()}" name="evoice" controlsList="nodownload" controls="controls"></audio>
							<input type="hidden" name="evoice" th:value="${explainBean.getEvoice()}">
						</div>
					</div>
					<div class="row" id="bottombtn">
						<div class="col-xs-3 col-xs-offset-1" style="height: 50px; width: 400px; margin-left: 250px; margin-top: 30px;">
							<button type="submit" style="width: 300px;">保存</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</body>
</html>
